<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>jstree basic demos</title>
	<style>
	html { margin:0; padding:0; font-size:62.5%; }
	body { max-width:800px; min-width:300px; margin:0 auto; padding:20px 10px; font-size:14px; font-size:1.4em; }
	h1 { font-size:1.8em; }
	.demo { overflow:auto; border:1px solid silver; min-height:100px; }
	</style>
	<link rel="stylesheet" href="./../../dist/themes/default/style.min.css" />
</head>
<body>
	<h1>HTML demo</h1>
	<div id="html" class="demo">
		<ul>
			<li data-jstree='{ "opened" : true }'>Root node
				<ul>
					<li data-jstree='{ "selected" : true }'>Child node 1</li>
					<li>Child node 2</li>
				</ul>
			</li>
		</ul>
	</div>

	<h1>Inline data demo</h1>
	<div id="data" class="demo"></div>

	<h1>Data format demo</h1>
	<div id="frmt" class="demo"></div>

	<h1>AJAX demo</h1>
	<div id="ajax" class="demo"></div>

	<h1>Lazy loading demo</h1>
	<div id="lazy" class="demo"></div>

	<h1>Callback function data demo</h1>
	<div id="clbk" class="demo"></div>

	<h1>Interaction and events demo</h1>
	<button id="evts_button">select node with id 1</button> <em>either click the button or a node in the tree</em>
	<div id="evts" class="demo"></div>

	<script src="//ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
	<script src="./../../dist/jstree.min.js"></script>
	
	<script>
	// html demo
	$('#html').jstree();

	// inline data demo
	$('#data').jstree({
		'core' : {
			'data' : [
				{ "text" : "Root node", "children" : [
						{ "text" : "Child node 1" },
						{ "text" : "Child node 2" }
				]}
			]
		}
	});

	// data format demo
	$('#frmt').jstree({
		'core' : {
			'data' : [
				{ 
					"text" : "Root node", 
					"state" : { "opened" : true }, 
					"children" : [
						{ 
							"text" : "Child node 1", 
							"state" : { "selected" : true },
							"icon" : "jstree-file"
						},
						{ "text" : "Child node 2", "state" : { "disabled" : true } }
					]
				}
			]
		}
	});

	// ajax demo
	$('#ajax').jstree({
		'core' : {
			'data' : {
				"url" : "./root.json",
				"dataType" : "json" // needed only if you do not supply JSON headers
			}
		}
	});

	// lazy demo
	$('#lazy').jstree({
		'core' : {
			'data' : {
				"url" : "//www.jstree.com/fiddle/?lazy",
				"data" : function (node) {
					return { "id" : node.id };
				}
			}
		}
	});

	// data from callback
	$('#clbk').jstree({
		'core' : {
			'data' : function (node, cb) {
				if(node.id === "#") {
					cb([{"text" : "Root", "id" : "1", "children" : true}]);
				}
				else {
					cb(["Child"]);
				}
			}
		}
	});

	// interaction and events

function ejemploForIn(dato) {
//var dato = [2, 6, 5, 1, 18, 44];
var msgForNormal = '';
var msgForIn = '';
//For normal
for (var i=0; i<dato.length; i++) { msgForNormal = msgForNormal + dato[i] + ' - '; }
//For in
for (i in dato) { msgForIn = msgForIn + dato[i] + ' - '; }
alert ('msgForNormal contiene ' + msgForNormal + ' y msgForIn contiene '+ msgForIn);
}


	
	$('#evts_button').on("click", function () {
		var instance = $('#evts').jstree(true); 
		instance.deselect_all();
		instance.select_node('1');
	});
	
	var cont = 0;

	$('#evts')
		.on("changed.jstree", function (e, data) {
			cont++;
			//alert(data);
			
			//ejemploForIn(data);
			
			if(data.selected.length && cont > 2) {
				
//				ejemploForIn(data.selected);
				
				alert( $(this).attr("id") + 'The selected node is: ' + data.instance.get_node(data.selected[0]).id);
			}
		})
		.jstree({
		'core' : {
			'data' : [
				{ "text" : "Root node", "state" : { "opened" : true }, "children" : [
						{ "text" : "Child node 1" },
						{ "text" : "Child node 2", "state" : { "opened" : true }, "children" : [
						{ "text" : "Child node 1", "id" : "99" },
						{ "text" : "Child node 2", "id" : "100", "children" : [
						
						{ "text" : "Child node 1", "id" : "999", "state" : { "disabled" : true } },
						{ "text" : "Child node 2", "id" : "1000", "state" : { "selected" : true }, "icon" : "jstree-file" },
						{ "text" : "Child node 1", "id" : "11", "state" : { "disabled" : true } },
						{ "text" : "Child node 1", "id" : "12", "state" : { "disabled" : true } },
						{ "text" : "Child node 1", "id" : "13", "state" : { "disabled" : true } },
				] }
				] }
				]}
			]
		}
	});
	</script>
  
</body>
</html>